<template lang="pug">
    div.tabbar
      template( v-for="item in list" ) 
        div.box( @click="change(item)")
          img.icon( :src="item.url === $route.path? item.active:item.default")
          span.name {{item.name}}

</template>

<script>
export default {
  name: 'tabbar',
  data(){
    return {
      list :[
        { id:0, name : '首页' , active : require('../images/index_on.png')  ,default : require('../images/index.png' ), url:'/'},
        { id:1, name : '砍价订单' , active : require('../images/find_on.png') ,default : require('../images/find.png'), url:'/cut_order'},
        { id:2, name : '客房订单' , active :require( '../images/order_on.png') ,default : require('../images/order.png'), url:'/room_order'},
        { id:3, name : '我的' , active :require( '../images/mine_on.png' ),default : require('../images/mine.png'), url:'/mine'},
      ],
    }
  },
  methods:{
    change(obj){
      this.$router.push(obj.url)
    }
  }
}
</script>

<style lang="less" scoped>
.tabbar{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1rem;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .box{
    flex: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon{
      width: .38rem;
      height: .38rem;
    }
    .name{
      font-size: .28rem;
      margin-top: .06rem;
    }
  }
}
</style>
